<template>
  <div class="search-popup">
    <van-search
      v-model="searchVal"
      show-action
      :placeholder="placeholderVal"
      @search="onSearch"
      @cancel="onCancel"
      @input="onInput(searchVal)"
    />
    <HistoryHot
      v-if="blockShow == 1"
      :historyKeywordList="historyKeywordList"
      :hotKeywordList="hotKeywordList"
      @tagClick="tagClick"
    ></HistoryHot>

    <SearchProducts
      v-else-if="blockShow == 2"
      :goodsList="goodsList"
      :filterCategory="filterCategory"
      @priceChangeSearch='priceChangeSearch'
      @categoryChangeSearch="categoryChangeSearch"
    ></SearchProducts>

    <SearchTipsList
      @tagClick="tagClick"
      v-else-if="blockShow == 3"
      :searchTipsList="searchTipsList"
    >
    </SearchTipsList>
  </div>
</template>

<script>
import HistoryHot from "@/components/searchPopup/HistoryHot.vue";
import SearchProducts from "@/components/searchPopup/SearchProducts.vue";
import SearchTipsList from "@/components/searchPopup/SearchTipsList.vue";
import {
  GetSearchPopupData,
  SearchTipsListData,
  GetSearchData,
} from "@/request/api";

export default {
  components: {
    HistoryHot,
    SearchProducts,
    SearchTipsList,
    GetSearchData,
  },
  data() {
    return {
      //搜索框的v-model值
      searchVal: "",
      //搜索框的placeholder值
      placeholderVal: "",
      //blockShow用来决定将来弹出层展示的是那个界面
      //blockShow为1 则表示 展示历史和热门界面
      //blockShow为2 则表示 展示提示列表界面
      //blockShow为3 则表示 展示商品列表界面
      blockShow: 1,
      historyKeywordList: [],
      hotKeywordList: [],
      searchTipsList: [],
      goodsList: [],
      filterCategory: [],
      order: "desc",
      categoryId: 0,
      sort: "id",
    };
  },

  methods: {
    tagClick(val) {
      this.searchVal = val;
      this.onSearch(this.searchVal);
    },
    priceChangeSearch(value) {
      this.sort = 'price';
      this.order=value
      this.onSearch(this.searchVal);
    },
    categoryChangeSearch(id) {
      this.categoryId = id;
      this.onSearch(this.searchVal);
    },
    onSearch(value) {
      (this.blockShow = 3);
      // console.log("确定了搜索", value);
    },
    onCancel() {
      this.$router.go(-1);
    },
     onInput(value) {
      //每一输入一个符号的时候，先清除掉上一次输入的定时器
      if(this.timer){
        clearTimeout(this.timer)
      }
      //防抖
      this.timer=setTimeout(()=>{
        //把界面修改成3
          (this.blockShow = 3),
        // console.log(value);
        //发起请求，请求输入的提示列表的数据
        SearchTipsListData({ keyword: value })
        .then((res) => {
          this.searchTipsList = res.data;
          // console.log(res.data);
        });
      },500)
    
    },
    onSearch(value) {
      this.blockShow = 2;
      GetSearchData({
        keyword: value,
        page: 1,
        size: 20,
        order: this.order,
        categoryId: this.categoryId,
        sort: this.sort,
      }).then((res) => {
        let { goodsList, filterCategory } = res.data;
        this.goodsList = goodsList;

        //对filterCategory数据进行加工处理
        //[{id:0,name:'全部',checked:true},{id:1005000,name:'居家',checked:false}]

        //处理后
        //[{text:'全部1111',value:0},{text:'居家',value:1}] 
        let newArr = JSON.parse(
          JSON.stringify(filterCategory)
            .replace(/name/g, "text")
            .replace(/id/g, "value")
        );
        this.filterCategory = newArr;
      });
    },
  },
  created() {
    // console.log('弹出层created');
    setTimeout(() => {
          GetSearchPopupData().then((res) => {
      // console.log(res);
      this.placeholderVal = res.data.defaultKeyword.keyword;
      let { historyKeywordList, hotKeywordList } = res.data;
      // console.log(historyKeywordList,hotKeywordList);
      this.historyKeywordList = historyKeywordList;
      this.hotKeywordList = hotKeywordList;
    });
    }, 400);
  },
};
</script>
 
<style lang = "less" scoped>
.search-popup {
  background-color: #efefef;
  width: 100%;
  height: 100%;
  position: absolute;
  /* right: 0; */
  top: 0;
  z-index: 9;
}
</style>